<!-- 画线 -->
<template>
    <div ref="Cavans"></div>
</template>
<script setup>
import * as THREE from 'three'
const Cavans = ref(null)
// 渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 抗锯齿
})
// 优化 设置像素比
renderer.setPixelRatio(window.devicePixelRatio || 1)
renderer.setSize(window.innerWidth/2, window.innerHeight/2)
// 相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500)
camera.position.set(0, 0, 100)
camera.lookAt(0, 0, 0); //坐标原点
// 创建一个场景
const scene = new THREE.Scene()
const color = new THREE.Color(Math.random(), Math.random(), Math.random(),)
// 材质  线条材质 create a random color LineBasicMaterial
const material = new THREE.LineBasicMaterial({color})
// 定义好材质之后，我们需要一个带有一些顶点的geometry（几何体）
const points = [];
// 点 THREE.Vector3
points.push( new THREE.Vector3( 0, -10, 0 ) )
points.push( new THREE.Vector3( -30, 0, 0 ) )
points.push( new THREE.Vector3( 0, 10, 0 ) )
// geometry 几何体 
const geometry = new THREE.BufferGeometry().setFromPoints( points );
// 线 THREE.Line
const line = new THREE.Line( geometry, material );

scene.add( line );
renderer.render( scene, camera );
onMounted(()=>{
    Cavans.value.appendChild(renderer.domElement)
})

</script>